<template>
  <div class="online-sale">
    <div class="naviga">数据采集&nbsp;>&nbsp;导购反馈</div>
    <div class="border-r margin-top">
      <div class="el-tabs__content">
        <div class="col-xs-12 margin-top">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="反馈时间">
              <el-date-picker
                v-model="date"
                value-format="yyyy-MM-dd"
                @change="changeDate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="有无图片">
              <el-select v-model="formInline.picturesMark" placeholder="有无图片">
                <el-option label="全部" value="ALL"></el-option>
                <el-option label="有" value="1"></el-option>
                <el-option label="无" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getData">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="margin-top col-xs-12">
      <div class="charts ">
        <div class="charts-box">
          <div class="chart chart-bg-1">
            {{topData.GuideFeedbackTotal || '暂无数据'}}
          </div>
          <div class="chart-des">反馈累计数量</div>
        </div>
        <div class="charts-box">
          <div class="chart chart-bg-2">
            {{topData.NoReadCnt || '暂无数据'}}
          </div>
          <div class="chart-des">未读数量</div>
        </div>
        <div class="charts-box">
          <div class="chart chart-bg-3">
            {{topData.PicCnt || '暂无数据'}}
          </div>
          <div class="chart-des">图片数量</div>
        </div>
        <div class="charts-box">
          <div class="chart chart-bg-4">
            {{topData.CityCnt || '暂无数据'}}
          </div>
          <div class="chart-des">地区数量</div>
        </div>
        <div class="charts-box">
          <div class="chart chart-bg-1">
            {{topData.ShopCnt || '暂无数据'}}
          </div>
          <div class="chart-des">门店数量</div>
        </div>
      </div>
    </div>
    <div class="border-r margin-top">
      <el-table
        :data="tableData"
        v-loading="loading"
        element-loading-text="加载中"
        element-loading-spinner="el-icon-loading"
        style="width: 100%">
        <el-table-column
          prop="feedbackTime"
          label="反馈时间">
        </el-table-column>
        <el-table-column
          prop="feedbackShop"
          label="反馈门店">
        </el-table-column>
        <el-table-column
          prop="feedbackLocation"
          label="反馈地点">
        </el-table-column>
        <el-table-column
          prop="picturesMark"
          label="有无图片">
        </el-table-column>
        <el-table-column
          prop="responder"
          label="反馈者">
        </el-table-column>
        <el-table-column
          prop="readMark"
          label="阅读状态">
        </el-table-column>
        <el-table-column
          prop=""
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showDetail(scope.row.feedbackId)">查看详情</el-button>
            <el-button @click="deleteData(scope.row.feedbackId)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="padding: 20px"
        background
        align="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!--模态框显示查看详情-->
    <div class="modal fade bs-example-modal-lg" id="detail">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <div class="naviga">数据采集&nbsp;>&nbsp;导购反馈&nbsp;>&nbsp;查看详情</div>
          </div>
          <div class="modal-body" style="background-color: #F6F6F6">
            <div class="row">
              <el-col :span="24">
                <div class="border-r">
                  <div class="title" >
                    <el-tag type="success" style="margin-bottom: 15px;margin-top: 15px">{{detail.feedbackShop}}</el-tag>
                    <el-button size="small" @click="edit">编辑</el-button>
                  </div>
                  <div style="padding-left: 15px;padding-right: 15px;padding-top: 15px">
                    <div>
                      <div class="research-box">
                        <span style="color: #BEBEBE">反馈人:</span>
                        <span>{{detail.responder}}</span>
                      </div>
                      <div class="research-box">
                        <span style="color: #BEBEBE">反馈时间:</span>
                        <span>{{detail.dataTime}}</span>
                      </div>
                    </div>
                    <p style="padding-bottom: 15px">{{detail.feedback}}</p>
                    <div class="avatar-box" v-for="(items,index) in detail.pictureList" >
                      <img :src="'http://'+items.pictureF" class="avatar">
                      <!--<div class="text-center">-->
                      <!--<el-button round class="margin-top" @click="removeImg(index)">移除</el-button>-->
                      <!--</div>-->
                    </div>
                  </div>
                </div>
              </el-col>
            </div>
          </div>
          <div class="modal-footer">
            <div class="text-center">
              <el-button type="primary" >确认</el-button>
              <button type="button" class="el-button el-button--info" data-dismiss="modal">取消</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--模态框显示编辑-->
    <div class="modal fade" id="classManage">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <div class="naviga">编辑</div>
          </div>
          <div class="modal-body">
            <div class="row">
              <el-col :span="24">
                <div class="border-r">
                  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-form-inline">
                    <el-form-item label="反馈内容" prop="feedback">
                      <el-input v-model="ruleForm.feedback" type="textarea"></el-input>
                    </el-form-item>
                    <el-form-item label="反馈图片" prop="feedbackPictureList">
                      <div class="overflow">
                        <div class="avatar-box" v-for="(items,index) in imageUrl" >
                          <img :src="'http://'+items" class="avatar">
                          <div class="text-center">
                            <el-button round class="margin-top" @click="removeImg(index)">移除</el-button>
                          </div>
                        </div>
                        <el-upload
                          class="avatar-uploader"
                          action="/file/uploadFile"
                          name="file"
                          :data="uploadConfig"
                          :show-file-list="false"
                          :on-success="handleAvatarSuccess"
                          accept="image/png,image/jpg,image/jpeg"
                          :before-upload="beforeAvatarUpload">
                          <i  class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                      </div>
                    </el-form-item>
                  </el-form>
                </div>
              </el-col>
            </div>
          </div>
          <div class="modal-footer">
            <div class="text-center">
              <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
              <button type="button" class="el-button el-button--info" data-dismiss="modal">取消</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style  lang="less" scoped>
  .el-tabs__item.is-active{
    border-bottom: 2px solid #409eff;
  }
  .charts {
    width: 100%;
    display: inline-flex;
    justify-content: space-between;
    background: #fff;
    border-radius: 5px;
    padding: 15px;
  }

  .charts-box {
    margin-right: 15px;
  }
  .chart {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    text-align: center;
    line-height: 110px;
    font-size: 18px;
    color:#868686;
    z-index: 1;
    display: block;

    &::after {
      content: '';
      display: block;
      position: absolute;
      top: 10%;
      left: 10%;
      width: 80%;
      height: 80%;
      background: #fff;
      border-radius: 50%;
      z-index: -1;
    }
    &:hover{
      transform: scale(1.1);
      color: #000;
    }
  }
  .chart-des{
    margin-top: 10px;
    display: block;
    text-align: center;
  }
  .chart-bg-1 {
    background: linear-gradient(left bottom, #fb9292, #f5da63);
    box-shadow: 0 0 20px #fb9292;
  }

  .chart-bg-2 {
    background: linear-gradient(left bottom, #5bd77b, #d7e770);
    box-shadow: 0 0 20px #5bd77b;
  }

  .chart-bg-3 {
    background: linear-gradient(left bottom, #40c6cf, #4df195);
    box-shadow: 0 0 20px #40c6cf;
  }

  .chart-bg-4 {
    background: linear-gradient(left bottom, #5ed77b, #d7e76f);
    box-shadow: 0 0 20px #5ed77b;
  }
  .title{
    line-height: 30px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-left: 15px;
  }
  .research-box{
    width: 200px;
    height: 30px;
    line-height: 30px;
    display: inline-block;
    margin-right: 15px;
  }
  .el-tag-custom {
    height: 45px;
    line-height: 45px;
    width: 150px;
    margin-right: 15px;
    margin-bottom: 15px;
    color: black;
    display: inline-block;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 4px;
    box-sizing: border-box;
    border: 1px solid rgba(64,158,255,.2);
    white-space: nowrap
  }
  .el-tag-0{
    background-color: #F7DEE3;
  }
  .el-tag-1{
    background-color: #E3E2F3;
  }
  .el-tag-2{
    background-color: #D1ECF0;
  }
  .el-tag-3{
    background-color: #F6F4DB;
  }
  .fix-div{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 999;
    background-color: whitesmoke;
    padding-bottom: 15px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    background-color: #00a4eb;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .avatar-box{
    width: 178px;
    height: 240px;
    display: inline-block;
    margin-left: 10px;
  }
  .overflow{
    width: 100%;
    height: 235px;
    overflow-x: auto;
  }
</style>
<script type="es6">
  export default {
    data() {
      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();}
        },
        //提交时间
        date:  [],
        formInline: {
          startDate:'',
          endDate:'',
          picturesMark: 'ALL',
          pageNo:1,
          pageSize:10
        },

        total: 0,
        pSize: 10,
        currentPage: 1,

        topData:{},
        tableData: [],
        detail:{},
        show:false,
        tableData2:[],
        typeTag:"",
        imageUrl:[],
        uploadConfig: {
          type:'Img'
        },
        ruleForm: {
          feedbackId: '',
          feedback:'',
          feedbackPictureList:'',
          updatePicture:'YES'
        },
        rules: {
          feedback: [
            { required: true, message: '请输入反馈标题', trigger: 'blur' }
          ]
        },
        loading:true
      }
    },
    mounted(){
      this.setDate()
    },
    methods: {
      //页数
      handleSizeChange(val) {
        this.pSize = val;
        this.formInline.pageSize= val
        this.dataList();
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.formInline.pageNo= val
        this.dataList();
      },
      // 获取当前日期和当前日期前一个月
      formatDate(date) {
        var month=Number(date.getMonth()) + 1
        if(month<10){
          month='0'+month
        }
        return date.getFullYear()+'-'+month+'-'+date.getDate();
      },
      setDate(){
        var nowdate = new Date();
        var startDate=this.formatDate(new Date(nowdate - 30*24*3600*1000))
        var endDate=this.formatDate(nowdate)
        this.formInline.startDate=startDate
        this.formInline.endDate=endDate
        this.date=[startDate,endDate]
        this.getData();
      },
      getData(){
        this.getDataTop()
        this.dataList()
      },
      // 时间范围改变时
      changeDate(val){
        this.formInline.startDate=val[0]
        this.formInline.endDate=val[1]
      },
      // 反馈累计、未读、地区数量
      getDataTop(){
        this.$http.post(this.GLOBAL.host,{
          method:'DataAc_API7020',
          query:this.formInline
        })
        .then((res) => {
          this.topData=res.data.data;
        })
        .catch((error) => {
          this.topData={}
        });
      },
      // 获取到导购反馈列表
      dataList(){
        this.loading=true
        this.$http.post(this.GLOBAL.host,{
          method:'DataAc_API7010',
          query:this.formInline
        })
        .then((res) => {
          this.loading=false
          this.tableData=res.data.data.list;
          this.total=res.data.data.total
        })
        .catch((error) => {
          this.loading=false
          this.tableData=[]
          this.total=0
        });
      },
      // 查看详情
      showDetail(id){
        $('#detail').modal('show');
        this.$http.post(this.GLOBAL.host,{
          method:'DataAc_API7030',
          query:{
            feedbackId:id
          }
        })
        .then((res) => {
          this.detail=res.data.data
        })
        .catch((error) => {
          this.detail={}
        });
      },
      // 删除反馈
      deleteData(id){
        this.$confirm('此操作将删除该反馈, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.post(this.GLOBAL.host,{
            method:'DataAc_API7050',
            query:{
              "feedbackId": id
            }
          })
          .then((res) => {
            if(res.data.data.RES=='00S'){
              this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success'
              });
              this.dataList()
            }else{
              this.$notify.error({
                title: '错误',
                message: '删除失败'
              });
            }
          })
          .catch((error) => {
            this.$notify.error({
              title: '错误',
              message: '删除失败'
            });
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      edit(){
        $('#detail').modal('hide');
        $('#classManage').modal('show');
        this.imageUrl=[]
        this.ruleForm.feedbackId=this.detail.feedbackId
        this.ruleForm.feedback=this.detail.feedback
        for(var i in this.detail.pictureList){
          this.imageUrl.push(this.detail.pictureList[i].pictureF)
        }
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl.push(res.fileUrl) ;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpg';
        const isJPEG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isImg = file.type === isJPG||isJPEG||isPNG;
        const isLt2M = file.size / 1024 / 1024 < 2;
        if(!isImg){
          this.$notify({
            title: '提示',
            message: '只能上传图片格式!',
            type: 'error',
            duration:1000
          });
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isImg&&isLt2M;
      },
      removeImg(index){
        this.imageUrl.splice(index,1)
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.saveRe()
          } else {
            return false;
          }
        });
      },
      // 保存访谈内容
      saveRe(){
        var imgUrlList=''
        imgUrlList+=this.imageUrl.join(',')
        if(this.imageUrl.length==0){
          this.ruleForm.updatePicture='NO'
        }else{
          this.ruleForm.updatePicture='YES'
        }
        console.log(imgUrlList)
        this.ruleForm.feedbackPictureList=imgUrlList
        this.$http.post(this.GLOBAL.host,{
          method:'DataAc_API7040',
          query:this.ruleForm
        })
        .then((res) => {
          if(res.data.data.RES=='00S'){
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success'
            });
            $('#classManage').modal('hide');
            this.ruleForm={
              interviewTitle: '',
              interviewText:'',
              interviewType:'',
              city:'',
              associatedProductor:'',
              associatedMap:'',
              interviewPictureList:""
            }
            this.dataList();
          }else{
            this.$notify.error({
              title: '错误',
              message: '保存失败'
            });
          }
        })
        .catch((error) => {
          this.$notify.error({
            title: '错误',
            message: '保存失败'
          });
        });
      },
    }
  };
</script>
